Boxes 

margin * 
margin-top 
margin-right 
margin-bottom 
margin-left 

padding * 
padding-top 
padding-right 
padding-bottom 
padding-left 

border * 
border-top * 
border-bottom * 
border-right * 
border-left * 

border-color * 
border-top-color 
border-right-color 
border-bottom-color 
border-left-color 

border-style * 
border-top-style 
border-right-style 
bo rd e r- bo tto m - sty I e 
border-left-style 

border-width * 
border-top-width 
border-right-width 
border-bottom-width 
border-left-width 

Positioning 

display 

position 

top 

right 

bottom 

left 

float 

clear 

z-index 

direction 

unicode-bidi 

overflow 

clip 

visibility 

Dimensions 

width 

min-width 

max-width 

height 

min-height 

max-height 

line-height 

vertical-align 

Miscellaneous 

content 
quotes 
counter-reset 
counter-increment 
marker-offset 
list-style * 
list-style-type 
list-style-image 
list-style-position 

Shorthand properties 
are marked with * 



SYNTAX 

/* Comment */ 

@media type { 

selector { 
property 

> 

: values; 

} 

(Media type optional) 

SELECTORS 

Styles apply to: 

* 

All elements 

div 

<div> 

div * 

Elements within <div> 

div span 

<span> within <div> 

div, span 

<div> and <span> 

div > span 

<span> with <div> as 
parent 

div + span 

<span> preceded by 
<div> ... </div> 

.class 

Elements of class "class" 

div.class 

<div> of class "class" 

#itemid 

Element with id "itemid" 

div#itemid 

<div> with id "itemid" 

a[class] 

<a> with class attribute 

a[class='x'] 

<a> when class is "x" 

a[class~ = 'x'] 

<a> when class is a list 
of space-seperated values 
and one of those is 'x' 

a[lang|='en'] 

<a> when lang begins 
with "en" 

1_1 

PSEUDO-SELECTORS 

Styles apply to: 

: first-chi Id 

First child of element 

:first-line 

First line of element 

: first-letter 

First letter of element 

:hover 

Element when mouse over 

: active 

Active element 

:focus 

Element with focus 

: link 

Non-active, unvisited 

links without mouse over. 

:visited 

Visited links 

:lang(lang) 

Element with text of 
language "lang" 


MEDIA TYPES (@media) 

all 

projection 

braille 

screen 

embossed 

speech 

handheld 

tty 

print 

tv 


BOX MODEL 


Visible Area Width 



Height Border Padding Margin 



UNITS 

px 

Pixels 

em 

lem equal to font size of 
parent (same as 100%) 

ex 

Height of lower case "x" 

% 

Percentage 

in 

Inches 

cm 

Centimeters 

mm 

Millimeters 

Pt 

lpt = l/72in 

pc 

lpc = 12pt 

#789abc 

RGB Hex Notation 

#acf 

Equates to "#aaccff" 

rgb(0,25,50) 

Value (0 to 255) of each 
of red, green, and blue. 

May also be percentages 

0 

0 requires no unit 


PROPERTIES THAT INHERIT 

azimuth 

list-style 

border-collapse list-style-image 

border-spacing list-style-position 

caption-side 

list-style-type 

color 

orphans 

cursor 

page 

direction 

page-break-inside 

empty-cells 

quotes 

font 

speak 

font-family 

speak-header 

font-stretch 

text-align 

font-size 

text-indent 

font-size-adjust text-transform 

font-style 

volume 

font-variant 

white-space 

font-weight 

widows 

letter-spacing 

word-spacing 

line-height 


Paging 

size 

marks 

page-break-before 

page-break-after 

page-break-inside 

page 

orphans 

widows 

Color / Background 

color 

* background 
background-color 
background-image 
background-repeat 
background-attachment 
background-position 

Fonts 

* font 
font-family 
font-style 
font-variant 
font-weight 
font-stretch 
font-size 
font-size-adjust 

Text 

text-indent 

text-align 

text-decoration 

text-shadow 

letter-spacing 

word-spacing 

text-transform 

white-space 

Tables 

caption-side 

table-layout 

border-collapse 

border-spacing 

empty-cells 

speak-header 

Interface 

cursor 

* outline 
outline-width 
outline-style 
outline-color 

Aural 

volume 

speak 

* pause 
pause-before 
pause-after 

* cue 

cue-before 

cue-after 

play-during 

azimuth 

elevation 

speech-rate 

voice-family 

pitch 

pitch-range 

stress 

richness 

speak-punctuation 

speak-numeral 

Available free from 
AddedBytes.com 






















































